<template>
  <div>
    <div class="padding-tb">
      <el-button type="primary" size="mini" @click="backup()">备份当前数据</el-button>
    </div>
    <div>
      <el-table :data="data.list" border stripe>
        <el-table-column prop="name" align="center" label="备份时间" :formatter="timeFormatter" width="280"></el-table-column>
        <el-table-column width="200" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="restore(scope.row.name)">使用此备份还原数据</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="padding-tb">
      <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageNoChange"
      :current-page="pageNo"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="data.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  backupList,
  backup,
  restore
} from "../service/api";
export default {
  data() {
    return {
      data: {
        list: [],
        total: 0
      },
      pageNo: 1,
      pageSize: 10
    };
  },
  methods: {
    timeFormatter(v) {
      // console.log(v)
      let year = v.name.slice(0, 4),
          month = v.name.slice(4, 6),
          day = v.name.slice(6, 8),
          hour = v.name.slice(8, 10),
          minute = v.name.slice(10, 12),
          second = v.name.slice(12)
      return `${year}年${month}月${day}日${hour}:${minute}:${second}`
    },
    pageSizeChange(val) {
      this.fetchData(1, val);
    },
    pageNoChange(val) {
      this.fetchData(val, this.pageSize);
    },
    refreshData() {
      this.fetchData(this.pageNo,this.pageSize);
    },
    fetchData(pageNo = 1, pageSize = 10) {
      this.pageNo = pageNo,
      this.pageSize = pageSize
      backupList({
        pageNo,
        pageSize
      }).then(({data}) => {
        this.data = data.data;
      })
    },
    backup() {
      this.$confirm('此操作只备份服务端已经保存的数据，如果有数据还没有保存，请先去活动查询页面点击保存之后再进行备份。确定要现在进行备份吗？','提示信息').then(_=>{
        backup().then(_ => {
          this.$message({
            showClose: true,
            message: "备份成功",
            type: "success"
          });
          this.refreshData();
        })
      })
    },
    restore(backupPoint) {
      this.$confirm('确定要还原这个时间点的数据吗？（建议在还原之前先备份当前数据）','提示信息').then(_=>{
        restore({backupPoint}).then(_=>{
          this.$message({
            showClose: true,
            message: "还原成功",
            type: "success"
          });
        })
      })
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

<style lang="less" scoped>
.padding-tb {
  padding: 10px 0;
}
.blue-bg {
  width: 300px;
}
.sub-title {
  padding-bottom: 5px;
}
fieldset {
  border: 1px dashed #ddd;
  padding: 5px;
}
</style>
